import React from "react";
import Confirm from "../../common/Confirm";
import "./css/product_common.css"

/*导出组件*/
export default class Pagination extends React.Component{
    constructor(props){
        super(props);
        this.style={
            page_ensure:{
                width: '40px',
                height: '22px',
                lineHeight:"22px",
                fontSize: "12px",
                color: "#999",
                fontFamily: "Microsoft YaHei",
                backgroundColor: "transparent",
                border:"1px solid #ededed",
                borderRadius: "2px",
                marginLeft: "10px",
                userSelect:"none",
            }
        }
        this.state={
            pageSize:0,
            dataSize:0,
            eachSize:0,
            text: 1
        }
    }


    componentWillMount(){
        /*if(this.state.dataSize <= 0){
         this.setState({
         text :0
         });
         }*/
    }

    componentWillReceiveProps(nextProps){
        let eachSize = this.props.eachSize;
        let dataSize = nextProps.dataSize;
        let pageSize = Math.ceil(dataSize/eachSize);
        /*if(this.state.dataSize <= 0){
         this.setState({
         text :0
         });
         }*/
        this.setState({
            pageSize:pageSize,
            dataSize:dataSize,
            eachSize:eachSize,
        })
    }

    changePageNum(e){
        let numtest = /^[0-9]*$/;
        let text = e.target.value
        if(!numtest.test(text)){
            return
        }
        this.setState({
            text:text
        });
    }

    sure(size,num){
        if(this.state.pageSize <= 0){
            this.setState({
                text :0
            });
            return
        }
        if (num < 1) {
            num = 1;
            this.setState({
                text : 1
            },this.props.onSure(size,num));
            return
        }
        if(this.state.text > this.state.pageSize){
            num = this.state.pageSize;
            this.setState({
                text : this.state.pageSize
            })
        }
        this.props.onSure(size,num);
    }
    left(size,num){
        if(num=="NaN"||num==""){
            this.state.text="";
            return;
        }
        if(this.state.pageSize == 0)return;
        if(this.state.text>this.state.pageSize){
            this.setState({
                text:this.state.pageSize
            },this.props.onSure(size,this.state.pageSize));
            return
        }
        if(this.state.text<=1){
            this.setState({
                text:1
            });
            return
        }
        this.setState({
            text : parseInt(num)-1
        });
        this.props.onSure(size,parseInt(num)-1);
    }
    right(size,num){
        if(num=="NaN"||num==""){
            this.state.text="";
            return;
        }
        if(this.state.pageSize == 0)return;
        if(this.state.text>=this.state.pageSize){
            this.setState({
                text:this.state.pageSize
            },this.props.onSure(size,this.state.pageSize));
            return
        }
        this.setState({
            text : parseInt(num)+1
        });
        this.props.onSure(size,parseInt(num)+1);
    }

    render(){
        return (
            <div className="product_lot_modify">
                <ol className="product_page_code">
                    <li className="product_page_li1">总计<span>{this.state.dataSize}</span>条</li>
                    <li className="product_page_li2">每页<span>{this.state.eachSize}</span>条</li>
                    <li className="product_page_li3">共<span>{this.state.pageSize}</span>页</li>
                    <li>第&nbsp;<input type="text" className="product_page_input" value={this.state.text} onChange={this.changePageNum.bind(this)}/>&nbsp;页</li>
                    <li><Confirm tcontext={'确定'} style={this.style.page_ensure} touch={this.sure.bind(this,this.state.eachSize,this.state.text)}/></li>
                    <li className="product_page_button_two">
                        <i className="product_page_button product_page_left" onClick={this.left.bind(this,this.state.eachSize,this.state.text)}/>
                        <i className="product_page_button product_page_right" onClick={this.right.bind(this,this.state.eachSize,this.state.text)}/>
                    </li>
                </ol>
            </div>
        )
    }
}
